import React, { Component } from 'react'
import styles from "./Order.module.scss"
import "./antd.scss"
import { Tabs, WhiteSpace } from 'antd-mobile';
import FoodList from "../FoodList"
import { connect } from "react-redux"
import axios from "../../../utils/myaxios"
import Lazy from "../../../utils/imgLazyLoad"
/*
此为菜品列表- 商家推荐下面的大组件 
包含了FoodList组件
*/

class FoodOrder extends Component {

    componentDidMount(){    
        axios.post("/user/getCustomizedSortByShopID",{
            shopID:this.props.shopID
        }).then((res)=>{
            
            if(res.code===200){
                const newArr = res.results.map((v)=>{
                    return {title:v.sortOName,sub:v.sortOID}
                })

                this.props.initMenuOne(newArr)
            }
        }).catch((err)=>{
            console.log(err);         
        })
    }

    
    state = {
        nowIndex:0,       
    }

    changeIndex = (i)=>{             
        this.setState({
            nowIndex:(i.sub%this.props.menuOne.length===0)? this.props.menuOne.length - 1:(i.sub%this.props.menuOne.length-1)
        })
        this.props.changeSortTID((i.sub%this.props.menuOne.length===0)?this.props.menuOne.length:(i.sub%this.props.menuOne.length));
    }
    render() {      
        return (

            <div id={styles.Order} className="Order">
                <div className={styles.orderBox}>
                    {/* 第一层展示图 */}
                    <div className={styles.showImg}>
                        <Lazy src={"http://175.24.122.212:9090/" + (this.props.storeMsg.shopPhotos)} alt="店铺" />
                    </div>
                    {/* 商家推荐 */}
                    <div className={styles.recommend}>
                        <h2 className={styles.rcdTit}>商家推荐</h2>
                        <div className={styles.itemBox}>
                            <div className={styles.recommendItem}>
                                <Lazy src={(this.props.beSelectKind.length>0?("http://175.24.122.212:9090/" + this.props.beSelectKind[1].picture):"") } 
                                     alt="图片" />
                                <span className={styles.itemName}>
                                    {this.props.beSelectKind.length>0?this.props.beSelectKind[1].name:""}
                                </span>
                                <span className={styles.itemPrice}>￥{this.props.beSelectKind.length>0?this.props.beSelectKind[1].price:""}</span>
                            </div>
                            <div className={styles.recommendItem}>
                                <Lazy src={(this.props.beSelectKind.length>0?("http://175.24.122.212:9090/" + this.props.beSelectKind[2].picture):"") }
                                     alt="图片" />
                                <span className={styles.itemName}>{this.props.beSelectKind.length>0?this.props.beSelectKind[2].name:""}</span>
                                <span className={styles.itemPrice}>￥{this.props.beSelectKind.length>0?this.props.beSelectKind[2].price:""}</span>
                            </div>
                            <div className={styles.recommendItem}>
                                <Lazy src={(this.props.beSelectKind.length>0?("http://175.24.122.212:9090/" + this.props.beSelectKind[3].picture):"") }      
                                     alt="图片" />
                                <span className={styles.itemName}>{this.props.beSelectKind.length>0?this.props.beSelectKind[3].name:""}</span>
                                <span className={styles.itemPrice}>￥{this.props.beSelectKind.length>0?this.props.beSelectKind[3].price:""}</span>
                            </div>
                        </div>
                    </div>

                </div>
                {/* 菜品列表 */}
                <div className={styles.orderList}>
                    <WhiteSpace />
                    <Tabs 
                        tabs={this.props.menuOne}
                        initialPage={false}
                        tabBarPosition="left"
                        tabBarInactiveTextColor={"#999"}
                        tabBarUnderlineStyle={{height:"50px",top:this.state.nowIndex*50}}
                        renderTab={tab => <span className={styles.tabsNav}>{tab.title}</span>}
                        onTabClick={this.changeIndex}
                    >
                        <div>
                            <FoodList foodNum={this.props.shopID}></FoodList>
                        </div>
                        <div>
                            <FoodList shopID={this.props.shopID}></FoodList>
                        </div>
                        <div>
                            <FoodList shopID={this.props.shopID}></FoodList>
                        </div>
                        <div>
                            <FoodList shopID={this.props.shopID}></FoodList>
                        </div>
                        <div>
                            <FoodList shopID={this.props.shopID}></FoodList>
                        </div>
                    </Tabs>
                    <WhiteSpace />
                </div>
                {/* 选择菜品规格 */}
                <div className={`${styles.selectFood} ${this.props.isSelect ? styles.selectNow:""}`}>
                    {/* 顶部食物信息 */}
                    <div className={styles.foodTit}>
                        <div className={styles.titLeft}>
                            <Lazy src={(this.props.nowSelectFood.picture?("http://175.24.122.212:9090/" + this.props.nowSelectFood.picture):"")} alt="图片"/>
                        </div>
                        <div className={styles.titRight}>
                            <h2>{this.props.nowSelectFood?this.props.nowSelectFood.name:""}</h2>
                            <span>已选：
                                {this.props.isBeSelect[0].nowFood ? this.props.isBeSelect[0].nowFood :"不要辣"}/
                                {this.props.isBeSelect[1].nowFood ? this.props.isBeSelect[1].nowFood :"带米饭"}/
                                {this.props.isBeSelect[2].nowFood ? this.props.isBeSelect[2].nowFood :"千张"}</span>
                            <strong>￥{this.props.nowSelectFood?this.props.nowSelectFood.price:0}</strong>
                        </div>
                    </div>
                    {/* 辣度 米饭 加菜 */}
                    <div className={styles.foodSpicy}>
                        {this.props.foodMsg.map((v,topIndex)=>
                            <div key={v.name}>
                                <h3>{v.name}</h3>
                                <div className={styles.spicyBox}>
                                    {v.value.map((item,i)=>
                                        // 根据循环的层数设置三个不同的点击变色事件
                                        <span key={i} 
                                        onClick={()=>{this.props.beSelect(topIndex,i,v)}} 
                                        className={this.props.isBeSelect[topIndex].nowIndex===i ? styles.select:""}>
                                        {item}</span>
                                    )}
                                </div>
                        </div>)}
                    </div>
                    {/* 选好了 */}
                    <div className={styles.selectDone}>
                        <div className={`${styles.doneBox}`} 
                        //   onClick={()=>this.props.doneSelect(10016121598541588000,this.props.seletedID)}>
                            onClick={()=>this.props.doneSelect(this.props.userInfo["0"].userID,this.props.seletedID)}>
                            选好了
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}     
const mapStateToProps = (state)=>{
    return {
        // 注入用户信息
        userInfo:state.loginReducer.userInfo,
        // 被选中的食品ID
        seletedID:state.foodStoreReducer.seletedID,
        // 获取商家信息initStoreMsg
        storeMsg:state.foodStoreReducer.initStoreMsg,
        // 获取菜单的信息
        beSelectKind:state.foodStoreReducer.beSelectKind,
        // 获取一级菜单信息
        menuOne:state.foodStoreReducer.menuOne,
        // 传递数据
        nowSelectFood:state.foodStoreReducer.nowSelectFood,
        isBeSelect:state.foodStoreReducer.isBeSelect,
        isSelect:state.foodStoreReducer.isSelectFood,
        foodMsg:state.foodStoreReducer.foodCanSelect,
    }
}

const mapActionToState = (dispatch)=>{
    return {
        initMenuOne(res){
            dispatch({
                type:"initMenuOne",
                payload:res
            })
        },

        doneSelect(userID,productID){
            // 点击选好了说明就应该添加新的食品进入购物车了
            axios.post("/user/addToCart",{
                userID,
                productID,
                productnum:1
            }).then((res)=>{                      
                dispatch({
                    type:"doneSelect",
                    productID,
                    cartID:res.results.cartID
                })
            }).catch((err)=>{
                console.log(err);    
            })

        },

        beSelect(index,i,v){    
             dispatch({
                type:"change"+index,
                payload:i,
                selectFood:v.value[i]
            })
        },
        
        changeSortTID(id){             
            dispatch({
                type:"changeSortTID",
                payload:id
            })
        }
    }
}
export default  connect(mapStateToProps,mapActionToState)(FoodOrder)